<template>
  <div>
    <div class="top">
      <span class="fu" @click="fun()">&lt;</span>
      <span class="i">申请卡号</span>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="shi">
      <img src="@/assets/ayuan/images/images/1(1)_03.gif" alt="" /><br />
      <span>认证成功</span>
      <p>恭喜您，完成了身份验证</p>
    </div>
    <div class="get">
      <input type="text" placeholder="点击下方按钮获取你的银行卡号" v-model="str"/><br>
      <button @click="shen()">点击获取你的银行卡号</button><br>
      <span @click="shou()">点我回首页</span>
      <br>
    </div>
  </div>
</template>

<script>
  import { shen_qing } from "@/apis/mycom.js";
export default {
  data(){
    return {
      cang:true,
      str:"",
      username:localStorage.token,
      userId: this.$route.query.myid,
      accountName:"建设银行丈八支行",
      // kahao:"",
    }
  },
  methods: {
    fun() {
      this.$router.go(-1);
    },
    shen() {
      console.log(this.$route.query.myid)
      this.cang=true
      shen_qing({
        username: this.username,
        userId: this.userId,
        accountName: this.accountName,
        // accountCard:this.kahao
      }).then((ok) => {
        // console.log(ok.data.data.tbAccount.accountCard);
        if (ok.data.code == 1) {
          // this.$router.push("applyfor")
          console.log(ok.data);
          this.str=ok.data.data.tbAccount.accountCard
          // this.$refs.name=ok.data.data.tbAccount.accountCard
        }
      });
    },
    shou() {
      this.$router.push("/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  background-color: #2d6cb9;
  color: white;
  display: flex;
  height: .6rem;
  .i {
    display: block;
    margin-left: 1.04rem;
    line-height: .6rem;
    font-size: .2rem;
  }
  .fu {
    font-size: .36rem;
    margin-left: .16rem;
    line-height: .6rem;
  }
  ul {
    // float:right;
    // line-height: .6rem;
    position: absolute;
    right: .1rem;
    top: .26rem;
  }
  li {
    width: .08rem;
    height: .08rem;
    border-radius: 50%;
    float: left;
    background-color: white;
    margin-right: .06rem;
    list-style: none;
  }
}
.shi {
  width: 100%;
  min-height: 1.9rem;
  text-align: center;
  border-bottom: .02rem solid rgba(128, 128, 128, 0.122);
  img {
    margin-top: .32rem;
    margin-bottom: .16rem;
  }
  span {
    font-size: .2rem;
  }
  p {
    margin-top: .1rem;
    font-size: .14rem;
    color: gray;
  }
}
.get {
  margin-top: .3rem;
  text-align: center;
  input {
    width: 2.8rem;
    height: .35rem;
    border: .01rem solid gray;
  }
  input:placeholder-shown{
    font-size: .12rem;
  }
  button {
    height: .26rem;
    margin-top: .12rem;
    // font-weight: 700;
    margin-bottom: .1rem;
    border: .02rem solid black;
    border-radius: .1rem;
  }
  span{
    font-size: .12rem;
    color: #2d6cb9;
  }
}
</style>